<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入elementUI样式-->
    <link rel="stylesheet" href="../element-ui-2.13.0/lib/theme-chalk/index.css">
    <!--导入vue js文件-->
    <script src="../vue/vue-v2.6.10.js"></script>
    <script src="../vue/axios-0.18.0.js"></script>
    <!--导入elementUI js文件-->
    <script src="../element-ui-2.13.0/lib/index.js"></script>

</head>
<body>
    <div id="app">
        <!--布局容器-->
        <el-container>
            <!--上下结构-->
            <el-header>廊坊电网日志管理系统</el-header>
            <el-container>
                <!--左右结构-->
                <el-aside width="150px" >
                    <!--
                        default-active 默认选中的菜单项
                        active-text-color= 默认选中的菜单项的文字颜色
                    -->

                    <el-menu
                            default-active="1"
                            class="el-menu-vertical-demo"
                            background-color="transparent"
                            text-color="#000"
                            active-text-color="red">
                        <el-menu-item index="4">
                            登录人:{{username}}
                        </el-menu-item>

                        <el-menu-item index="4">
                            <a  @click="logout()" target="right">重新登录</a>
                        </el-menu-item>
                        <el-menu-item index="1">
                            <a href="operationLog.html" target="right">运行日志</a>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <a href="query.html" target="right">查询</a>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <a href="createLog.html" target="right">新建</a>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <!--iframe框架标签-->
                   <!-- <iframe name="right" width="100%" height="99%" frameborder="0" ></iframe>-->
                    <!--默认显示页面createLog.html-->
                    <iframe name="right" src="operationLog.html" width="100%" height="99%" frameborder="0" ></iframe>
                </el-main>
            </el-container>
        </el-container>
    </div>
</body>
<style>
    .el-header, .el-footer {
        height: 60px;
        width: 100%;
        background-color: #cf9236;
        background:url(../title.jpg) no-repeat center;
        background-size: 100% 100%;
        color: #FFF;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #545c64;
        color: #FFF;
        text-align: left;
        height: 690px;
        background:url(../side.jpg) no-repeat center;
        background-size: 100% 100%;
    }
    .el-menu{
        position:static;
        background-color:transparent !important;
    }
    .el-menu-item{
        position:static;
        background-color:transparent !important;
    }

    .el-main {
        background-color: #EEE;
        color: #333;
        text-align: center;
        height: 690px;
    }

    body {
        margin: 0px
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    a {
        /*设置超链接的颜色和 删除下划线*/
        text-decoration:none;
        display: block;
    }
    .el-menu-item a{
        color: #000
    }

    .el-menu-item:hover a,.el-menu-item.is-active a{
        color: red;
    }
</style>
<script  type="text/javascript">
    new Vue({
        el:'#app',
        data: {
            username: "",
            backend_url: "http://localhost:8081"
        },
        created() {
            axios.get(this.backend_url + "/getUsername").then((res) => {
                if (res.data.flag) {

                    this.username = res.data.data
                }
            })
        },
        methods: {

            logout() {
                axios.get(this.backend_url + "/logout").then((res) => {
                    if (res.data.flag) {
                        this.$message({
                            message: res.data.message,
                            type: "success"
                        });
                        //window.location.href = window.location.origin + '/elog.html'
                        window.location.href = window.location.origin + '/login'
                    }
                })
            }
        }
    });

</script>
</html>